<!-- Line Chart -->

<!-- Chart Options Dropdown -->
<!-- 
<div class="dropdown left-dropdown-menu pull-left" id="chart-options">
    <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
        <i class="fa fa-lg fa-cog"></i>
    </button>
    <ul class="dropdown-menu">
        <div class="dropdown-menu-header">Chart Options</div>
        <div class="chart-options panel-body">
            line chart chart options go here
        </div>
    </ul>
</div>
-->

<div id="market-chart"></div>

<script type="text/javascript">

// Handle updating market chart
function updateMarketChart( market ){
    var assets = String(market).split('/'),
        asset1 = assets[0],
        asset2 = assets[1];
        data   = FW.MARKET_DATA[market].chart.trades;
    // console.log('updateMarketChart market,data=',market,data);
    // Create chart config by applying any customizations to the default config
    var cfg  = $.extend( true, {}, FW.CHART_CONFIG, {
        yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'Price'
            },
            height: '60%',
            lineWidth: 2,
            min: 0
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'Volume'
            },
            top: '65%',
            height: '35%',
            offset: 0,
            lineWidth: 2,
            min: 0
        }],
        series: [{
            // Price
            type: 'line',
            data: data.trades,
            tooltip: {
                valueDecimals: 8
            },
        }, {
            // Volume
            type: 'column',
            data: data.volume,
            yAxis: 1,
        }],
        tooltip: {
            split: false,
            shared: true,
            useHTML: true,
            formatter: function(){
                var tstamp = this.x;
                // If we have no volume, return false (hovering over period with no volume)
                if(!this.points[1])
                    return false;
                // Loop through the series data and find any trades
                // We do this so we can display info on multiple trade prices/volume
                var prices  = this.points[0].series.data,
                    volumes = this.points[1].series.data,
                    info    = [],
                    txt     = '<b>' + moment(tstamp).format('MMMM Mo YYYY HH:mm') + '</b><br>';
                txt += '<table class="highcharts-tooltip-table">';
                if(prices.length){
                    $.each(prices, function(idx, item){
                        if(item && item.x && item.x==tstamp){
                            var price   = item.y,
                                volume1 = volumes[idx].y,
                                volume2 = (price * volume1);
                            info.push([price,volume1,volume2]);
                        }
                    });
                    // Sort the trades by price in descending order
                    info.sort(function(a,b){
                        if(a[0] < b[0]) return 1;
                        if(a[0] > b[0]) return -1;
                        return 0;            
                    });
                    $.each(info, function(idx, arr){
                        txt += '<tr class="first"><td>Price</td><td class="separator">:</td><td class="text-right">' + numeral(arr[0]).format('0,0.00000000') + '</td><td>' + asset2 + '</td></tr>';
                        txt += '<tr><td>Volume</td><td class="separator">:</td><td class="text-right">' + numeral(arr[1]).format('0,0.00000000') + '</td><td>' + asset1 + '</td></tr>';
                        txt += '<tr><td colspan="2"></td><td class="text-right">' + numeral(arr[2]).format('0,0.00000000') + '</td><td>' + asset2 + '</td></tr>';
                    });
                } else {
                    txt += '<tr class="first"><td>Price</td><td class="separator">:</td><td class="text-right">' + numeral(this.points[0].point.y).format('0,0.00000000') + '</td><td>' + asset2 + '</td></tr>';
                    txt += '<tr><td>Volume</td><td class="separator">:</td><td class="text-right">' + numeral(this.points[1].point.y).format('0,0.00000000') + '</td><td>' + asset1 + '</td></tr>';
                }
                txt += '</table>';
                return txt;
            },
        },
    });
    // Restore last known zoom
    var sel = localStorage.getItem('marketChartZoom');
    if(sel)
        cfg.rangeSelector.selected = sel;
    // Initialize the chart
    setTimeout(function(){
        Highcharts.stockChart('market-chart', cfg);
        $('.highcharts-credits').remove();
    }, 10);
}
</script>